<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <!--个人数据-->
        <div class="文本框">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>关注管理</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>
          <el-table
              :data="followedLists"
              style="width: 100%">
            <el-table-column
                label="用户"
                width="50">
              <template slot-scope="scope">
                <el-avatar shape="square" :size="40" :src="scope.row.userAvatar"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="nickname"
                width="150">
            </el-table-column>
            <el-table-column
                prop="shortIntroduce"
                label="签名"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                fixed="right"
                align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="dialogVisible = true; idx= scope.$index;">取消关注</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br/>

        </div>
      </el-col>
    </el-row>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
      <span>您确定要取消关注？</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="cancelFanFollow">确定</el-button>
      </span>
    </el-dialog>


    <div class="页眉">
    </div>


  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      total: 100,
      pageSize: 10,
      current: 3,
      dialogVisible: false,
      queryByUserId: {
        idUser: window.sessionStorage.getItem("idUser")
      },
      cancelFollowArgs: {
        idUser: 0,
        idFan: window.sessionStorage.getItem("idUser")
      },
      followedLists: [],
      idx: 0,
    }
  },
  created() {
    this.getFollowedList()
  },
  methods: {
    async getFollowedList() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8088/userfollow/followedlist', {
        params: this.queryByUserId
      })
      this.followedLists = res.followedLists
      console.log(res)
    },
    async cancelFanFollow() {
      this.dialogVisible = false
      this.cancelFollowArgs.idUser=this.followedLists[this.idx].idUser;
      const {data: res} = await this.$http.post('http://39.102.77.65:8088/userfollow/cancelfanfollow', this.cancelFollowArgs);
      console.log(res)
      if(res.result == 1) {
        this.getFollowedList()
        this.$message({
          message: '取消关注成功！',
          type: 'success'
        });
      }
      else if(res.result == 0) {
        this.$message({
          message: '取消关注失败！',
        });
      }
      else if(res.result == -1){
        this.$message({
          message: '取消关注失败，您并没有关注该用户！',
        });
      }
      console.log(res)
    },
  }
}
</script>